// pages/hairstylist/hairstylist.ts
import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';
import { setBookingOrder,  getHairstylistInfo, getServiceItems, getUndoneOrderNumber, getSameHair } from "../../utils/api";
import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast';
// 选择器
let query: any;
// 当前第几页
let page = 1;
// 一页多少数据
let number = 10;
// 请求类型
let type = 0;
// 数据库中有多少数据 分页计算页尾使用
let blogCount = 0;
// 左侧数组索引
let leftLen = 0;
// 右侧数组索引
let rightLen = 0;
// 是否触底
let dropDownFlag = false;
// 当前加载图片到第几个了 限制下拉使用
let tempNumber = 1;
// 动态索引
let index = 0;
// 临时数组
let oList: any = [];
// 左右容器高度
let leftHeight = 0,
  rightHeight = 0;
let id = 0;
Page({
  data: {
    leftList: [],
    rightList: [],
    activeIndex: 1,
    hairstylist: {},
    serviceItems: [],
    orderNumber: {}
  },
  onLoad(e: any) {
    id = e.id;
    page = 1;
    type = 0;
    blogCount = 0;
    leftLen = 0;
    rightLen = 0;
    tempNumber = 1;
    leftHeight = 0;
    rightHeight = 0;
    this.onGetBlog();
    this.getHairsty(id);
    this.getItems(id);
    this.onGetUndoneOrderNumber();
  },
  // 获取多少人正在排队
  async onGetUndoneOrderNumber() {
    const { data } = await getUndoneOrderNumber({
      hairId: id
    })
    this.setData({
      orderNumber: data
    })
  },
  // 取号
  onTakeNumber(e: any) {
    Dialog.confirm({
      title: '操作确认',
      message: '是否取号该服务',
    })
      .then(async () => {
        const res = await setBookingOrder({
          serviceItemsID: e.currentTarget.dataset.id,
          hairstylistID: id
        })
        if (res.flag) {
          const toast: any = Toast.loading({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            message: '取号成功 3 秒后进入订单页',
            selector: '#custom-selector',
          });
          let second = 3;
          const timer = setInterval(() => {
            second--;
            if (second) {
              toast.setData({
                message: `取号成功 ${second} 秒后进入订单页`,
              });
            } else {
              clearInterval(timer);
              Toast.clear();
              wx.switchTab({
                url: "../order/order"
              })
            }
          }, 1000);
        }

      })
  },
  // 获取发型师的项目
  async getItems(id: any) {
    const { data } = await getServiceItems({
      id
    })
    this.setData({
      serviceItems: data
    })
  },
  // 跳转预约页面
  onAppointment(e: any) {
    wx.navigateTo({
      url: `../subscribe/subscribe?id=${e.currentTarget.dataset.id}&hairstylist=${id}`
    })
  },
  //
  tel() {
    wx.makePhoneCall({
      phoneNumber: (this.data.hairstylist.user_tb.userAddress_tb.phone)
    })
  },
  async getHairsty(id: any) {
    const { data } = await getHairstylistInfo({ id })
    data['practiseTime'] = Math.floor((+new Date() - data.practiseTime ? (+new Date(data.practiseTime)) : 0) / 31536000000)
    data.uploadTime = Math.floor((+new Date() - (+new Date(data.uploadTime))) / 31536000000)
    this.setData({
      hairstylist: data
    })
  },
  // 进入详情页
  onBreakPage(event: any) {
    const id: String = event.currentTarget.dataset.id;
    wx.navigateTo({
      url: `../homeDetails/homeDetails?id=${id}`
    })
  },
  // 获取博客信息
  async onGetBlog() {
    const { rows, count } = await getSameHair({ hairId: id, page, number, type, random: Math.random() });
    blogCount = count;
    oList = rows;
    this.beginRenderBlog();
  },
  // 开始渲染博客瀑布流
  beginRenderBlog() {
    query = wx.createSelectorQuery();
    this.afterRenderBlog();
  },
  afterRenderBlog() {
    if (!oList[index]) {
      oList = [];
      index = 0;
      return;
    }
    this.renderBlogList()
  },
  renderBlogList() {
    query.select('.hairstylistBox .contentLeft').boundingClientRect();
    query.select('.hairstylistBox .contentRight').boundingClientRect();
    query.exec((res: any) => {
      leftHeight = res[0].height; //获取左边列表的高度
      rightHeight = res[1].height; //获取右边列表的高度
      if (leftHeight > rightHeight) {
        this.setData({
          ["rightList[" + rightLen + "]"]: oList[index]
        }, () => {
          rightLen++;
          index++;
          this.afterRenderBlog();
        })
      } else {
        this.setData({
          ["leftList[" + leftLen + "]"]: oList[index]
        }, () => {
          leftLen++;
          index++;
          this.afterRenderBlog();
        })
      }
    });
  },
  // 图片预加载
  imageLoad(e: any) {
    setTimeout(() => {
      if (tempNumber % 10 == 0) {
        dropDownFlag = true;
      }
      const { position, index } = e.currentTarget.dataset
      if (position == "left") {
        const temp: any = this.data.leftList[index];
        temp['isLoad'] = true;
        this.setData({
          ["leftList[" + index + "]"]: temp
        }, () => {
          tempNumber++;
        })
      } else {
        const temp: any = this.data.rightList[index];
        temp['isLoad'] = true;
        this.setData({
          ["rightList[" + index + "]"]: temp
        }, () => {
          tempNumber++;
        })
      }
    }, 1000)
  },

  getInfoTab(e: any) {

  }
})